<template>
    <div class="rankingList">
        <div v-for="(item, index) in items" :key="item.id" class="item" :class="{ 'is-active': activeItem == item.id }"
            @mouseenter="activate(item.id)">
            <div>
                <div class="rank" v-if="index === 0">
                    <i class="iconfont gold icon-paiming1"></i>
                </div>
                <div class="rank" v-else-if="index === 1">
                    <i class="iconfont silver icon-paiming2"></i>
                </div>
                <div class="rank" v-else-if="index == 2">
                    <i class="iconfont bronze icon-paiming3"></i>
                </div>
                <div class="rank" v-else>
                    {{ index < 9 ? '0' : '' }}{{ index + 1 }} </div>
                </div>

                <div class="visibleDetails" v-if="activeItem !== item.id">
                    <div class="bookName4">
                        {{ cut(item.name, 9) }}
                    </div>
                    <div class="bookAuthor_hot_tag4">
                        {{ item.like_number }}点赞
                    </div>
                </div>
                <div class="invisibleDetails" v-if="activeItem === item.id">
                    <div>
                        <div class="turnRed bookName4" @click="navigateToBook(item.id)">
                            {{ cut(item.name, 7) }}
                        </div>
                        <div class="turnRed bookAuthor_hot_tag4" @click="navigateToAuthor(item.author.author_id)">
                            {{ item.author.author_name }}
                        </div>
                        <div class="bookAuthor_hot_tag4">
                            {{ item.like_number }} 点赞
                        </div>
                    </div>

                    <Loader v-if="item.loading" />
                    <img :src="item.cover_url" class="cover" @load="handleImageLoad(item)" v-show="!item.loading"
                        @click="navigateToBook(item.id)">
                </div>
            </div>
        </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { fetchBooks, books } from '@/apis/getBooks_by_tags.js';
import { getCurrentInstance } from 'vue';
import { useNavigation } from '@/utils/navigate.js';
import { cut } from '@/utils/cutText.js';
import Loader from '@/components/loading2.vue';
import '@/display/fontTurnRed.css';
import '@/display/bookInfo.css';

const { navigateToCategory, navigateToBook, navigateToAuthor } = useNavigation(); //导入导航函数
const { proxy } = getCurrentInstance();
const activeItem = ref(null);
const items = ref([]);

const activate = (id) => {
    activeItem.value = id;
};

onMounted(async () => {
    await fetchBooks('all', proxy);
    items.value = books.value.sort((a, b) => b.search_number - a.search_number).slice(0, 10).map(item => ({
        ...item,
        loading: true
    }));
    console.log(books);
    activeItem.value = items.value[0]?.id || null;
});

const handleImageLoad = (item) => {
    item.loading = false;
};

</script>

<style scoped>
.rankingList {
    background-image: linear-gradient(to bottom, #fff1e3, 20%, #ffffff);
    width: 275px;
    border-radius: 2%;
}

.is-active {
    padding-bottom: 5px;
}

.item {
    display: flex;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.gold {
    color: rgb(242, 192, 86);
    font-size: 25px;
}

.silver {
    color: #C0C0C0;
    font-size: 25px;
}

.bronze {
    color: rgb(186, 110, 64);
    font-size: 25px;
}

.rank {
    font-size: 18px;
    width: 30px;
    height: 30px;
    color: #abaaa8;
    flex: 0 0 30px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visibleDetails {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
}

.invisibleDetails {
    display: flex;
    flex-grow: 1;
    align-items: flex-start;
    justify-content: space-between;
}

.cover {
    overflow: hidden;
    width: 35%;
    height: 100%;
    transition: all 0.3s ease;
    cursor: pointer;
}
</style>